<template>
  <div class="login-container">
      <el-form  ref="form" :model="form" :rules="rules" label-width="80px" class="login-form">
            <h2 class="login-title">顽石会员管理系统</h2>
            <el-form-item lable="账号" prop="username">
                    <el-input v-model="form.username" placeholder="请输入账号"></el-input>
            </el-form-item>
            <el-form-item lable="密码" prop="password">
                    <el-input v-model="form.password"  type="password" placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-form-item>
                    <el-button  type="primary" @click="onSubmit('form')">登陆</el-button>
            </el-form-item>
      </el-form>
  </div>
</template>

<script>
import {login,getUserInfo} from '@/api/login';
export default {
  data () {
    return {
      form:{
        username:"",
        password:""
      },
      rules:{
        username:[
          {required:true,message:"请输入用户名姓名",trigger:"blue"},
          {min:3,max:20,message:"长度在3~20字符",trigger:"blue"}
        ],
        password:[
           {required:true,message:"请输入密码",trigger:"blue"}
        ]
      }
    }
  },

  components: {},

  methods: {
    async huoquInfo(token){
        const {data} = await getUserInfo(token);
        //console.login(data)
        localStorage.setItem('wanshi-mms-user',JSON.stringify(data))
        this.$router.push("/");
    },

    onSubmit(forName){
        this.$refs[forName].validate((valid) => {
            if(valid){
              login(this.form.username,this.form.password).then(response=>{
                localStorage.setItem('wanshi-mms-token',response.data.token)
                this.huoquInfo(response.data.token);
              })
            }else{
                return false;
            }
        });
    }
  }
}
</script>

<style scoped>
.login-form { 
    width: 350px;
     /* 上下间隙150px, 左右自动 */
    margin: 160px auto;
    /*透明背景色*/
    background-color: rgb(255,255,255,0.8);
    padding: 30px; /* 圆角 */
    border-radius: 20px; 
}
.login-container {
    position: absolute; 
    width: 100%; 
    height: 100%;
    background: url("../../assets/lo.jpg"); 
    overflow: hidden; 
   
    }
    /* 标题 */
.login-title{
    text-align: center;
    color: #303133; 
}
</style>
